<script setup lang="ts">
import useMenuStore from '@/layouts/admin/useMenuStore'
import router from '@/plugins/router'
const { open } = useUtil()
const useUser = useUserStore()
let isMaster: string = useUser.getMaster()

const routes = ref(router
  .getRoutes()
  .filter((r) => r.children.length)
  .filter((r) => !r.meta.hidden)
  .filter((r) => r.meta.menu)
  .sort((a, b) => {
    return (b.meta.menu?.order ?? 0) - (a.meta.menu?.order ?? 0)
  }))

// 定义一个新的newRoutes[],等routes处理完之后赋值给他
let newRoutes: any[] = []
// 删除字组件中meta中存在hidden，如果hidden为true，则不显示在菜单中
const shouldDeleteChildRoutes = routes.value.map(item => {
  // 找到包含有hidden的所有下标，下标可能包含多个
  const indexs = []
  item.children.forEach((child, index) => {
    if (child.meta?.hidden) {
      indexs.push(index)
    }
  })
  let newChildren = item.children.filter((child, index) => !indexs.includes(index))
  return { ...item, children: newChildren }

})
// console.log(shouldDeleteChildRoutes)
newRoutes = shouldDeleteChildRoutes

//控制移动端与PC端菜单显示隐藏
const menuStore = useMenuStore()

onMounted(() => {
  document.documentElement.addEventListener('click', (e) => {
    if (document.documentElement.clientWidth < 640) menuStore.menuState = false
  })
})



const selectMenu = (index, indexPath) => {
  router.push({ name: index.index })
}

</script>

<template>
  <el-menu active-text-color="#2ed573" background-color="#031129" class="el-menu-vertical-demo" default-active="2"
    text-color="#fff">
    <el-sub-menu v-for="(route, index) in newRoutes" :key="route.name" :index="route.name">
      <template #title>
        <!-- 配置图表 -->
        <el-icon>
          <component :is="route.meta.menu.icon"></component>
        </el-icon>
        <span>{{ route.meta.menu.title }}</span>
      </template>
      <el-menu-item v-for="(subroute, ind) in route.children" :key="subroute.name" :index="subroute.name"
        @click="selectMenu">
        <span>{{ subroute.meta.menu.title }}</span>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<style lang="scss"></style>
